<!DOCTYPE html>
<html>
    <head>
        <style>
            div { font-family: Segoe UI; }
            .light { font-family: Segoe UI Light; }
            .semibold { font-family: Segoe UI Semibold; }
        </style>
    </head>
    <body>
        <section>
            <h2>font-weight: 200 vs light</h2>
            <div style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
            <p>
                The three lines above should have the same weight.
            </p>
        </section>
        
        <section>
            <h2>font-weight: 600 vs semibold</h2>
            <div style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold">Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
            <p>
                The three lines above should have the same weight.
            </p>
        </section>
        
        <section>
            <h2>Specific weight, Segoe UI</h2>
            <div style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
            <div style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
        </section>
            
        <section>
            <h2>Specific weight, Segoe UI Light</h2>
            <div class="light" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="light" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
        </section>
        
        <section>
            <h2>Specific weight, Segoe UI Semibold</h2>
            <div class="semibold" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
            <div class="semibold" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
        </section>
    </body>
</html>
